<template>
    <div class="sub-filter" v-if="filterData && !filterLoading">
        <div class="item">
            <div class="head">品牌：</div>
            <div class="body">
                <a @click="changeBrand(item.id)" :class="{active:filterData.selected === item.id}" href="javascript:;" v-for="item in filterData.brands" :key="item.id">{{item.name}}</a>
            </div>
        </div>
        <div class="item" v-for="item in filterData.saleProperties" :key="item.id">
            <div class="head">{{item.name}}：</div>
            <div class="body">
                <a @click="changeProp(item,sub.id)" :class="{active:item.selected === sub.id}" href="javascript:;" v-for="sub in item.properties" :key="sub.id">{{sub.name}}</a>
            </div>
        </div>
    </div>
    <div v-else class="sub-filter">
        <XtxSkeleton class="item" width="800px" height="40px"  />
        <XtxSkeleton class="item" width="800px" height="40px"  />
        <XtxSkeleton class="item" width="600px" height="40px"  />
        <XtxSkeleton class="item" width="600px" height="40px"  />
        <XtxSkeleton class="item" width="600px" height="40px"  />
    </div>
</template>

<script>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { findSubCategoryFilter } from '@/api/category';
export default {
    name:'SubFilter',
    setup(props,{emit}){
        // 获取路哟信息
        const route = useRoute()
        const filterData = ref(null)
        const filterLoading = ref(false)
        watch(()=>route.params.id,(newVal)=>{
            if (newVal && `/category/sub/${newVal}` === route.path) {
                filterLoading.value = true
                findSubCategoryFilter(route.params.id).then(data =>{
                    // 品牌
                    data.result.selected = null
                    data.result.brands.unshift({id:null,name:'全部'})
                    // 属性
                    data.result.saleProperties.forEach(item=>{
                        item.selected = null
                        item.properties.unshift({id:null,name:'全部'})
                    })
                    filterData.value = data.result
                    filterLoading.value = false
                })
            }
        },{immediate:true})
        // 获取销售属性参数
        const getParams = () =>{
            const obj = {brandId:null,attrs:[]}
            obj.brandId = filterData.value.selected
            filterData.value.saleProperties.forEach(item=>{
                if (item.selected) {
                    const prop = item.properties.find(p=>p.id === item.selected)
                    prop && obj.attrs.push({groupName: item.name, propertyName: prop.name})
                }
            })
            return obj
        }

        // 记录当前选择的品牌
        const changeBrand = (brandId) =>{
            if(filterData.value.selected === brandId) return
            filterData.value.selected = brandId
            emit('filter-change',getParams())
        }
        // 记录当前选择的销售属性
        const changeProp = (item,id) =>{
            if(item.selected === id) return
            item.selected = id
            emit('filter-change',getParams())
        }
        return{
            filterData,
            filterLoading,
            changeBrand,
            changeProp
        }
    }
};
</script>

<style scoped lang='less'>
// 筛选区
.sub-filter {
    background: #fff;
    padding: 25px;
    .item {
        display: flex;
        line-height: 40px;
        .head {
            width: 80px;
            color: #999;
        }
        .body {
            flex: 1;
            a {
                margin-right: 36px;
                transition: all 0.3s;
                display: inline-block;
                &.active,
                &:hover {
                    color: @xtxColor;
                }
            }
        }
    }
    .xtx-skeleton {
      padding: 10px 0;
    }
}
</style>